import React from 'react';

// 验证码组件
import Captcha from '@/components/Captcha'
import { Button, Form, Input,Space,message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined,KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState } from 'react';

// 导入密码登录借楼
import { normalloginFn } from '@/api/login'

// 导入两个hook,用来操作redux
import { useSelector,useDispatch } from 'react-redux';

// 导入路由相关的hook
import { useHistory } from 'react-router-dom';

// 导入hook 钩子 ref
import { useRef } from 'react';


const NormalLogin = () => {
	const [key,setKey]  = useState('')

	// 创建dispatch方法
	const dispatch = useDispatch()
	// const state = useSelector(state => state)

	// 创建his对象
	const his = useHistory() // 相当于类组件中 this.props.history

	// 创建ref对象
	const ref1 = useRef()

	// 获取form 表单实例
	const [form] = Form.useForm();

	const onFinish = (values) => {
		// 将key属性添加到values对象中
		values.key=key
		console.log('Success:', values);
		// 接下来调用登录接口
		normalloginFn(values).then((res) => {
			console.log('res',res);
			// 01：jwt 已经在响应拦截器中存到本地了
			// 02：将acl当前用户的菜单项存到redux(已经进行了持久化配置)
			if(res.data.errNo===0){
				// 登陆成功
				dispatch({type:'updateAcl',payload:res.data.context.acl})
				// 提示登录成功
				message.success('登陆成功',1,() => {
					his.push('/dashboard')
				})
			}else{
				// 登陆失败
				// 希望更新验证码(不用手动点了)，并且将输入框中上一次输入的结果清空
				console.log('登陆失败',ref1);
                console.log('form实例', form);

				ref1.current.loadashFn()
				// 清空表单项
				console.log('form实例',form);
				// 提示登录失败
                message.error(res.data.errText, 1, () => {
                    form.setFieldsValue({
                        username: '',
                        password: '',
                        captcha: ''
                    })
                })
			}
		})
	};
	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};

	//   定义一个 saveKey 函数
	const saveKey = (key) => {
		// console.log('父组件',key);
		setKey(key)
	}
	return (
		<div>
			<Form
				name="basic"
				wrapperCol={{
					span: 24,
				}}
				initialValues={{
					remember: true,
				}}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
				size='large'
				form={form}
			>
				<Form.Item
					name="username"
					rules={[
					{
						required: true,
						message: '请输入用户名',
					},
					]}
				>
					<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
				</Form.Item>

				<Form.Item
					name="password"
					rules={[
					{
						required: true,
						message: '请输入密码',
					},
					]}
				>
					<Input.Password prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" />
				</Form.Item>

				<Space>
					<Form.Item
						name="captcha"
						rules={[
						{
							required: true,
							message: '请输入验证码',
						},
						]}
					>
							<Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
							{/* <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha> */}
					</Form.Item>
					<Form.Item>
						<Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
					</Form.Item>
				</Space>

				<Form.Item
					wrapperCol={{
					span: 24,
					}}
				>
					<Button type="primary" htmlType="submit" block>
						登录
					</Button>
				</Form.Item>
    		</Form>
		</div>
	);
}

export default NormalLogin;
